<template>
  <div class="login">
    <div class="logo">
      <img
        src="../../assets/images/logo.png"
        alt=""
      >
    </div>
    <div class="content">
      <div class="change">
        <span
          @click="goLogin"
          :class="[status == '登录' ? 'activeClass' : '']"
        >登录</span>
        <span
          @click="goRegister"
          :class="[status == '注册' ? 'activeClass' : '']"
        >注册</span>
      </div>
      <div class="line">
        <span ref="line"></span>
      </div>
      <div
        class="contentbox"
        ref="contentbox"
      >
        <div
          class="loginbox"
          ref="loginbox"
        >
          <div class='input-item'>
            <input
              type="text"
              placeholder="用户名/手机号"
              v-model="loginData.mobile"
              @focus="shouline"
              @blur="hideline"
            >
          </div>
          <div class='input-item'>
            <input
              type="password"
              placeholder="密码必须为8~16位的数字+字符"
              v-model="loginData.password"
              @focus="shouline"
              @blur="hideline"
            >
          </div>
          <div class="operate">

            <p @click="goForget">忘记密码?</p>
          </div>
        </div>

        <div
          class="registerbox"
          ref="registerbox"
        >
          <div class='input-item'>
            <input
              type="text"
              placeholder="手机号"
              v-model="registerData.mobile"
              @focus="shouline"
              @blur="hideline"
            >

          </div>
          <div class='input-item'>
            <input
              type="text"
              placeholder="请输入验证码"
              v-model="registerData.code"
              @focus="shouline"
              @blur="hideline"
            >
            <button
              @click="getCode"
              :disabled='isget'
            >{{button}}</button>
          </div>
          <div class='input-item'>
            <input
              type="password"
              placeholder="请输入密码"
              v-model="registerData.password"
              @focus="shouline"
              @blur="hideline"
            >
          </div>
          <div class='input-item'>
            <input
              type="password"
              placeholder="请确认密码"
              v-model="registerData.verify_password"
              @focus="shouline"
              @blur="hideline"
            >
          </div>
          <div class='input-item'>
            <input
              type="text"
              placeholder="邀请码"
              v-model="registerData.invitation_code"
              :disabled='disabled'
              @focus="shouline"
              @blur="hideline"
            >
          </div>
        </div>
      </div>
      <div class='submit'>
        <button @click="login">{{status}}</button>
      </div>

    </div>
  </div>
</template>
<script>
import { login,getcode,register } from "../../api/user";
import { Toast } from "vant";
export default {
  data() {
    return {
      isfull: false,
      status: "登录",
      loginData: {
        mobile: null,
        password: null
      },
      button: "获取",
      isget: false,
      disabled: false,
      registerData: {
        mobile: null,
        password: null,
        verify_password: null,
        code: null,
        sms_id: null,
        invitation_code: null
      },
      buttonClick: false,
    };
  },
  methods: {
    shouline(e) {
      var a = 0;
      var timer = setInterval(function() {
        a += 0.4;

        e.target.style.borderBottom = `1px solid rgba(206, 52, 61,${a})`;
        if (a >= 1) {

          clearInterval(timer);
        }
      }, 200);
    },
    hideline(e) {
      e.target.style.borderBottom = `1px solid #ccc`;
    },
    goLogin() {
      this.status = "登录";
      this.$refs.loginbox.style.transform = "translateX(0%)";
      this.$refs.registerbox.style.transform = "translateX(100%)";

      this.$refs.contentbox.style.height = "170px";
      this.$refs.line.style.left = "0";
    },
    getCode() {
      if(this.registerData.invitation_code=="" || this.registerData.invitation_code==null){
        Toast("请输入邀请码");
      }else{
        const that = this;
        if (!/^1(3|4|5|7|8)\d{9}$/.test(this.registerData.mobile)) {
          Toast("请输入正确的手机号码 ");
        } else {
          getcode({ mobile: this.registerData.mobile })
            .then(res => {
              if (res.status == 200) {
                console.log(132);
                this.registerData.sms_id = res.data.sms_id;
                Toast("获取验证码成功");
                that.isget = true;
                var s = 120;
                var times = setInterval(() => {
                  s--;
                  that.button = `${s}秒`;
                  if (s <= 0) {
                    clearInterval(times);
                    this.isget = false;
                    this.button = "获取验证码";
                  }
                }, 1000);
              } else Toast("获取验证码异常");
            })
            .catch(err => {});
        }
      }
    },
    register() {
      if (!/^1(3|4|5|7|8)\d{9}$/.test(this.registerData.mobile)) {
        Toast("请输入正确的手机号码 ");
        return;
      }
      if (!this.registerData.code) {
        Toast("请输入验证码");
        return;
      }
      if (!/^[\w_-]{6,16}$/.test(this.registerData.password)) {
        Toast("请输入6-16位密码");
        return;
      }
      if (!/^[\w_-]{6,16}$/.test(this.registerData.verify_password)) {
        Toast("请输入6-16位确认密码");
        return;
      }
      if (this.registerData.password != this.registerData.verify_password) {
        Toast("两次密码不一致");
        return;
      }
      if (!this.registerData.invitation_code) {
        Toast("请输入邀请码");
        return;
      }
      register(this.registerData)
        .then(res => {
          if (res.status == 200) {
            Toast("注册成功，请返回登录");
            setTimeout(() => {
              this.$router.push({
                path: "/login"
              });
            }, 1200);
          } else {
            Toast("注册失败");
          }
        })
        .catch(() => {
          Toast("请检查网络");
        });
    },

    goRegister() {
      // this.$router.push({
      //   path: "/register"
      // });
      this.status = "注册";
      this.$refs.loginbox.style.transform = "translateX(-100%)";
      this.$refs.registerbox.style.transform = "translateX(-100%)";
      this.$refs.contentbox.style.height = "330px";
      this.$refs.line.style.left = "110px";
    },
    goForget() {
      this.$router.push({
        path: "/forget"
      });
    },
    login() {
      //登录
      if (this.status == "登录") {
        if (!/^1(3|4|5|7|8)\d{9}$/.test(this.loginData.mobile)) {
          Toast("请输入正确的手机号码");
          return;
        }
        if (!/^[\w_-]{6,16}$/.test(this.loginData.password)) {
          Toast("请输入6-16位密码");
          return;
        }

        Toast.loading({
          mask: true,
          message: '正在登陆...'
        });

        login(this.loginData).then(res => {
          if (res.status == 200) {
            localStorage.setItem("token", res.token);
            localStorage.setItem( "baseInfo", JSON.stringify(res.baseInfo) );
            localStorage.setItem( "task_queue", res.baseInfo.task_queue );

            Toast(res.message);
            setTimeout(() => {
              this.$router.push({
                path: "/"
              });
            }, 1200);
          } else {
            Toast(res.message);
          }
        });

      } else {
        //注册
        if (!/^1(3|4|5|7|8)\d{9}$/.test(this.registerData.mobile)) {
          Toast("请输入正确的手机号码 ");
          return;
        }
        if (!this.registerData.code) {
          Toast("请输入验证码");
          return;
        }
        if (!/^[\w_-]{6,16}$/.test(this.registerData.password)) {
          Toast("请输入6-16位密码");
          return;
        }
        if (!/^[\w_-]{6,16}$/.test(this.registerData.verify_password)) {
          Toast("请输入6-16位确认密码");
          return;
        }
        if (this.registerData.password != this.registerData.verify_password) {
          Toast("两次密码不一致");
          return;
        }
        if (!this.registerData.invitation_code) {
          Toast("请输入邀请码");
          return;
        }

        Toast.loading({
          mask: true,
          message: '正在注册...'
        });

        register(this.registerData)
          .then(res => {
            if (res.status == 200) {
              Toast("注册成功，请返回登录");
              setTimeout(() => {
                this.$router.push({
                  path: "/login"
                });
              }, 1200);
            } else {
              Toast(res.message);
            }
          })
          .catch(() => {
            Toast("请检查网络");
          });
      }
    }
  },
  mounted() {
    const code = this.$route.query.code;
    if (code) {
      this.login();
      this.registerData.invitation_code = code;
      this.disabled = true;
    }
  }
};
</script>

<style lang="scss">
.login {
  width: 100%;

  background: linear-gradient(
    180deg,
    rgba(223, 93, 18, 1) 0%,
    rgba(207, 28, 53, 1) 100%
  );
  opacity: 0.54;
  .logo {
    z-index: 2;

    position: absolute;
    left: 50%;

    top: 60px;
    transform: translateX(-50%);
    text-align: center;
    img {
      width: 106px;
      height: 106px;
    }
  }
  .header {
    header {
      color: #000;
      font-size: 20px;
      font-weight: 500;
      letter-spacing: 2px;
      .icon-icon- {
        color: #000 !important;
      }
    }
  }
  .content {
    padding: 60px 30px;
    background-color: #fff;
    width: 80%;
    margin: 0 auto;
    border: 1px solid #ddd;
    border-radius: 22px;
    position: absolute;
    top: 110px;
    left: 50%;
    transform: translateX(-50%);
    .line {
      width: 100%;
      height: 3px;
      position: relative;
      left: 0;
      top: 10px;
      span {
        transition: 0.5s all;
        position: absolute;
        left: 0;
        top: 0px;
        display: inline-block;
        width: 25px;
        height: 2px;
        background-color: #e6555d;
      }
    }
    .contentbox {
      height: 220px;
      display: flex;
      display: -webkit-flex;
      justify-content: space-between;
      overflow: hidden;
      flex-wrap: nowrap;
      transition: all 0.5s;
    }
    .loginbox {
      -webkit-flex-shrink: 0;
      width: 100%;
      transform: translateX(0);
      transition: 0.5s all;
    }
    .registerbox {
      -webkit-flex-shrink: 0;
      width: 100%;
      transform: translateX(100%);
      transition: 0.5s all;
    }
    .change {
      span {
        font-size: 20px;
        font-family: "MicrosoftYaHei";
        padding-right: 60px;
      }

      span {
        color: #e5b5b8;
      }
      .activeClass {
        color: #cb313a;
      }
    }
  }
  .input-item {
    width: 100%;
    height: 45px;
    margin-top: 20px;
    position: relative;
    left: 0;
    top: 0;
    button {
      position: absolute;
      right: 15px;
      top: 10px;
      outline: none;
      border: none;
      width: 84px;
      height: 25px;
      border-radius: 13px;
      color: #ce343d;
      font-size: 12px;
      background: none;
      border: 1px solid #cc323b;
    }
    input {
      padding-left: 15px;
      font-size: 16px;
      width: 100%;
      height: 100%;
      background: none;
      border: none;
      outline: none;
      border-bottom: 1px solid #ccc;
    }
    input::-webkit-input-placeholder {
      /* placeholder颜色  */
      color: #ccc;
      /* placeholder字体大小  */
      font-size: 14px;
      /* placeholder位置  */
      // text-align: right;
    }
  }
  .submit {
    position: absolute;
    right: 30px;
    bottom: -20px;
    letter-spacing: 2px;
    font-size: 16px;
    text-align: center;
    button {
      width: 150px;
      height: 50px;
      border-radius: 25px;
      background-color: #f35f68;
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 10px;
      border: none;
      outline: none;
      color: #fff;
      text-align: center;
      padding-left: 20px;
    }
  }
  .operate {
    width: 80%;
    margin: 10px auto;
    display: flex;
    justify-content: flex-end;
    padding: 10px;
    font-size: 16px;
  }
}
</style>

